<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/img/logo/logo.png" rel="icon">
    <title>Serverless Platform</title>
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Select2 -->
    <link href="/static/vendor/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css">
    <!-- Bootstrap DatePicker -->
    <link href="/static/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- Bootstrap Touchspin -->
    <link href="/static/vendor/bootstrap-touchspin/css/jquery.bootstrap-touchspin.css" rel="stylesheet">
    <!-- ClockPicker -->
    <link href="/static/vendor/clock-picker/clockpicker.css" rel="stylesheet">
    <!-- RuangAdmin CSS -->
    <link href="/static/css/ruang-admin.min.css" rel="stylesheet">
</head>

<body id="page-top">
<!-- path-->
<div class="d-sm-flex align-items-center justify-content-between">
    <h1 class="h3 mb-0 text-gray-800">Deploy New Function</h1>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="./">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page"><a href="#">Function Deploy</a></li>
        <li class="breadcrumb-item active" aria-current="page">STEP ONE</li>
    </ol>
</div>

<form action="/function/create_function_by_template" method="post">
    {% csrf_token %}
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">STEP 1 : CREATE FUNCTION</h6>
        <button type="submit" class="btn btn-primary" style="float: right">Next Step: Configure</button>
    </div>
    <div class="card mb-4">
        <div class="card-body">
            <div class="form-group">
                <label for="select2SinglePlaceholder">Username</label>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="username" name="username" readonly
                           aria-describedby="basic-addon3" value="{{ username }}">
                </div>
            </div>
            <div class="form-group">
                <label for="exampleFormControlReadonly">Function name</label>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon3"
                              style="background-color: lightskyblue">{{ username }}-</span>
                    </div>
                    <input type="text" class="form-control" id="fname" name="fname"
                           aria-describedby="basic-addon3" placeholder="Set your function name" required
                           pattern="[a-z| A-z | 0-9]{1,20}" onblur="CheckFunctionNameIsExits()" autofocus>
                </div>
            </div>
            <div class="form-group">
                <label for="select2SinglePlaceholder">Select Function language template</label>
                <select class="select2-single-placeholder form-control" name="flanguage" id="flanguage">
                    <option value="python">python</option>
                    <option value="python3">python3</option>
                    <option value="csharp">csharp</option>
                    <option value="go">go</option>
                    <option value="java11">java11</option>
                    <option value="java11-vert-x">java11-vert-x</option>
                    <option value="node">node</option>
                    <option value="node12">node12</option>
                    <option value="node14">node14</option>
                    <option value="php7">php7</option>
                    <option value="python3-debian">python3-debian</option>
                    <option value="ruby">ruby</option>
                </select>
            </div>
        </div>
    </div>
</form>


</div>
<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Select2 -->
<script src="/static/vendor/select2/dist/js/select2.min.js"></script>
<!-- Bootstrap Datepicker -->
<script src="/static/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap Touchspin -->
<script src="/static/vendor/bootstrap-touchspin/js/jquery.bootstrap-touchspin.js"></script>
<!-- ClockPicker -->
<script src="/static/vendor/clock-picker/clockpicker.js"></script>
<!-- RuangAdmin Javascript -->
<script src="/static/js/ruang-admin.min.js"></script>
<!-- Javascript for this page -->
<script>
    $(document).ready(function () {
        $('.select2-single').select2();
        // Select2 Single  with Placeholder
        $('.select2-single-placeholder').select2({
            placeholder: "Select a Province",
            allowClear: true
        });

        // Select2 Multiple
        $('.select2-multiple').select2();

        // Bootstrap Date Picker
        $('#simple-date1 .input-group.date').datepicker({
            format: 'dd/mm/yyyy',
            todayBtn: 'linked',
            todayHighlight: true,
            autoclose: true,
        });

        $('#simple-date2 .input-group.date').datepicker({
            startView: 1,
            format: 'dd/mm/yyyy',
            autoclose: true,
            todayHighlight: true,
            todayBtn: 'linked',
        });

        $('#simple-date3 .input-group.date').datepicker({
            startView: 2,
            format: 'dd/mm/yyyy',
            autoclose: true,
            todayHighlight: true,
            todayBtn: 'linked',
        });

        $('#simple-date4 .input-daterange').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            todayHighlight: true,
            todayBtn: 'linked',
        });

        // TouchSpin

        $('#touchSpin1').TouchSpin({
            min: 0,
            max: 100,
            boostat: 5,
            maxboostedstep: 10,
            initval: 0
        });

        $('#touchSpin2').TouchSpin({
            min: 0,
            max: 100,
            decimals: 2,
            step: 0.1,
            postfix: '%',
            initval: 0,
            boostat: 5,
            maxboostedstep: 10
        });

        $('#touchSpin3').TouchSpin({
            min: 0,
            max: 100,
            initval: 0,
            boostat: 5,
            maxboostedstep: 10,
            verticalbuttons: true,
        });

        $('#clockPicker1').clockpicker({
            donetext: 'Done'
        });

        $('#clockPicker2').clockpicker({
            autoclose: true
        });

        let input = $('#clockPicker3').clockpicker({
            autoclose: true,
            'default': 'now',
            placement: 'top',
            align: 'left',
        });

        $('#check-minutes').click(function (e) {
            e.stopPropagation();
            input.clockpicker('show').clockpicker('toggleView', 'minutes');
        });


    });

    function CheckFunctionNameIsExits() {
        $.get("/function/checkfunnameisexits", {fname: '{{ username }}-' + document.getElementById("fname").value}, function (res) {
            const UserNameBox = document.getElementById("fname");
            if (res.result === true) {
                UserNameBox.setCustomValidity("The function name already exists. Change it")
            } else {
                UserNameBox.setCustomValidity("")
            }
        });

    }
</script>

</body>

</html>